<!-- src/components/AuthPage.vue -->
<template>
  <div class="container">
    <!-- 熊猫装饰性的元素 -->
    <div class="panda-head">
      <div class="ear-l"></div>
      <div class="ear-r"></div>
      <div class="panda-face">
        <div class="blush-l"></div>
        <div class="blush-r"></div>
        <div class="eye-l">
          <div class="eyeball-l" :style="eyeStyle.left"></div>
        </div>
        <div class="eye-r">
          <div class="eyeball-r" :style="eyeStyle.right"></div>
        </div>
        <div class="nose"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="panda-hand">
      <div class="hand-l" :style="handStyle.left"></div>
      <div class="hand-r" :style="handStyle.right"></div>
    </div>

    <!-- 将 form 放在熊猫身体中 -->
    <div class="form-container">
      <router-view @onUsernameFocus="onUsernameFocus" @onPasswordFocus="onPasswordFocus" />

      <div class="panda-leg">
        <!-- 熊猫爪子 -->
        <div class="paw-l"></div>
        <div class="paw-r"></div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import BaseButton from "@/components/BaseButton.vue"; // 导入 BaseButton 组件
import background from "@/assets/images/login/background.png";

// 定义响应式数据
const username = ref("");
const password = ref("");
const isSubmitting = ref(false); // 控制按钮禁用状态

// 动态样式
const eyeStyle = reactive({
  left: {
    left: "0.6em",
    top: "0.6em",
  },
  right: {
    right: "0.6em",
    top: "0.6em",
  },
});

const handStyle = reactive({
  left: {
    height: "2.81em",
    top: "8.4em",
    left: "7.5em",
    transform: "rotate(0deg)",
  },
  right: {
    height: "2.81em",
    top: "8.4em",
    right: "7.5em",
    transform: "rotate(0deg)",
  },
});

// 方法：设置眼球的默认样式
const setNormalEyeStyle = () => {
  eyeStyle.left = {left: "0.6em", top: "0.6em"};
  eyeStyle.right = {right: "0.6em", top: "0.6em"};
};

// 方法：设置手的默认样式
const setNormalHandStyle = () => {
  handStyle.left = {
    height: "2.81em",
    top: "8.4em",
    left: "7.5em",
    transform: "rotate(0deg)",
  };
  handStyle.right = {
    height: "2.81em",
    top: "8.4em",
    right: "7.5em",
    transform: "rotate(0deg)",
  };
};

// 用户名输入框聚焦时触发
const onUsernameFocus = () => {
  eyeStyle.left = {left: "0.75em", top: "1.12em"};
  eyeStyle.right = {right: "0.75em", top: "1.12em"};
  setNormalHandStyle();
};

// 密码输入框聚焦时触发
const onPasswordFocus = () => {
  handStyle.left = {
    height: "6.56em",
    top: "3.87em",
    left: "11.75em",
    transform: "rotate(-155deg)",
  };
  handStyle.right = {
    height: "6.56em",
    top: "3.87em",
    right: "11.75em",
    transform: "rotate(155deg)",
  };
  setNormalEyeStyle();
};

// 点击表单提交
// const handleSubmit = () => {
//   isSubmitting.value = true; // 禁用按钮
//   console.log("Username:", username.value);
//   console.log("Password:", password.value);
//
//   // 模拟异步操作（例如 API 调用）
//   setTimeout(() => {
//     isSubmitting.value = false; // 恢复按钮状态
//     // 在这里处理登录逻辑，例如导航到主页
//   }, 2000);
// };

// 点击注册按钮时触发
// const handleRegister = () => {
//   console.log("注册按钮被点击");
//
//   // 在这里添加注册逻辑，例如导航到注册页面
// };

// 当点击页面其他区域时恢复默认样式
const onClickOutside = (event) => {
  if (
      event.target.id !== "username" &&
      event.target.id !== "password" &&
      event.target.id !== "confirmPassword"
  ) {
    setNormalEyeStyle();
    setNormalHandStyle();
  }
};

// 添加全局点击监听
document.addEventListener("click", onClickOutside);

// 当组件加载时修改背景颜色
onMounted(() => {
  document.body.style.backgroundImage = `url(${background})`;
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundRepeat = "no-repeat";
});

// 当组件卸载时恢复默认背景颜色
onUnmounted(() => {
  // document.body.style.backgroundColor = ""; // 恢复默认值
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  position: relative;
  width: 31.25em;
  height: 888px;
  transform: translate(-50%);
  left: 50%;
}

/* 表单容器 */
.form-container {
  position: relative;
  width: 100%;
  height: auto;
  top: 9em;
}

.panda-head {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.panda-face {
  height: 7.5em;
  width: 8.4em;
  background-color: #ffffff;
  border: 0.18em solid #2e0d30;
  border-radius: 7.5em 7.5em 5.62em 5.62em;
  position: absolute;
  top: 2em;
  margin: auto;
  left: 0;
  right: 0;
}

.ear-l,
.ear-r {
  background-color: #3f3554;
  height: 2.5em;
  width: 2.81em;
  border: 0.18em solid #2e0d30;
  border-radius: 2.5em 2.5em 0 0;
  top: 1.75em;
  position: absolute;
}

.ear-l {
  transform: rotate(-38deg);
  left: 10.75em;
}

.ear-r {
  transform: rotate(38deg);
  right: 10.75em;
}

.blush-l,
.blush-r {
  background-color: #ff8bb1;
  height: 1em;
  width: 1.37em;
  border-radius: 50%;
  position: absolute;
  top: 4em;
}

.blush-l {
  transform: rotate(25deg);
  left: 1em;
}

.blush-r {
  transform: rotate(-25deg);
  right: 1em;
}

.eye-l,
.eye-r {
  background-color: #3f3554;
  height: 2.18em;
  width: 2em;
  border-radius: 2em;
  position: absolute;
  top: 2.18em;
}

.eye-l {
  left: 1.37em;
  transform: rotate(-20deg);
}

.eye-r {
  right: 1.37em;
  transform: rotate(20deg);
}

.eyeball-l,
.eyeball-r {
  height: 0.6em;
  width: 0.6em;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 0.6em;
  top: 0.6em;
  transition: 1s all;
}

.eyeball-l {
  transform: rotate(20deg);
}

.eyeball-r {
  transform: rotate(-20deg);
}

.nose {
  height: 1em;
  width: 1em;
  background-color: #3f3554;
  position: absolute;
  top: 4.37em;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 1.2em 0 0 0.25em;
  transform: rotate(45deg);
}

.nose:before {
  content: "";
  position: absolute;
  background-color: #3f3554;
  height: 0.6em;
  width: 0.1em;
  transform: rotate(-45deg);
  top: 0.75em;
  left: 1em;
}

.mouth,
.mouth:before {
  height: 0.75em;
  width: 0.93em;
  background-color: transparent;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0.18em #3f3554;
}

.mouth {
  top: 5.31em;
  left: 3.12em;
}

.mouth:before {
  content: "";
  position: absolute;
  left: 0.87em;
}

.hand-l,
.hand-r {
  background-color: #3f3554;
  height: 2.81em;
  width: 2.5em;
  border: 0.18em solid #2e0d30;
  border-radius: 0.6em 0.6em 2.18em 2.18em;
  transition: 1s all;
  position: absolute;
  top: 8.4em;
  z-index: 1;
}

.hand-l {
  left: 7.5em;
}

.hand-r {
  right: 7.5em;
}

.panda-leg {
  position: absolute;
  bottom: 2em;
  left: 0;
  right: 0;
  z-index: 1;
}

.paw-l,
.paw-r {
  background-color: #3f3554;
  height: 3.12em;
  width: 3.12em;
  border: 0.18em solid #2e0d30;
  border-radius: 2.5em 2.5em 1.2em 1.2em;
  position: absolute;
}

.paw-l {
  left: 10em;
}

.paw-r {
  right: 10em;
}

.paw-l:before,
.paw-r:before {
  position: absolute;
  content: "";
  background-color: #ffffff;
  height: 1.37em;
  width: 1.75em;
  top: 1.12em;
  left: 0.55em;
  border-radius: 1.56em 1.56em 0.6em 0.6em;
}

.paw-l:after,
.paw-r:after {
  position: absolute;
  content: "";
  background-color: #ffffff;
  height: 0.5em;
  width: 0.5em;
  border-radius: 50%;
  top: 0.31em;
  left: 1.12em;
  box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff;
}



@media screen and (max-width: 500px) {
  .container {
    font-size: 14px;
  }
}


</style>
